<!-- 云诺 https://app.witframe.com/market/list/index?uid=24 -->
<template>
	<view class="content" :style="contentStyle">
		<u-navbar :title="title" leftIcon="search" :leftIconColor="leftIconColor" :border="false" :bgColor="baseColor" :titleStyle="titleStyle"
			v-if="showNavbar" @leftClick="searchBtnClick"></u-navbar>
		<view class="top">
			<image :src="topBg" mode="widthFix" class="top-bg"></image>
			
			<view class="content-time">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3.5">
						<text class="top-title" :style="{'color': titleStyle.Color}">{{minappinfo.tName ? minappinfo.tName : "云诺服务"}}</text>
					</u-col>
					<u-col span="5">
						<u-search class="search" :placeholder="placeholderKeyword" v-model="keyword" :focus="false" :showAction="false" :animation="true" @search="clickSearch"></u-search>
					</u-col>
					<u-col span="3.5">
						
					</u-col>
				</u-row>
			</view>
			

			
			<view class="swiper-content">
				<u-swiper class="swiper-img" height="150" :list="swiperList" keyName="tPhoto" :effect3d="true" previousMargin="30"
					nextMargin="30" :autoplay="true" radius="5" :bg-color="swiperColor" @click="clickTopSwiper" indicator
					indicatorMode="line" circular>
				</u-swiper>
			</view>
			<view>
				<u-grid :border="false" col="5" @click="clickTopBtn">
				            <u-grid-item
				                    v-for="(listItem,listIndex) in iconList"
				                    :key="listIndex"
				            >
				                <u-icon
				                        :customStyle="{paddingTop:20+'rpx'}"
				                        :name="listItem.name"
				                        :size="32"
				                ></u-icon>
				                <text class="grid-text">{{listItem.title}}</text>
				            </u-grid-item>
				        </u-grid>
			</view>
			<view class="notice-content" v-if="showNotice == true">
				<u-notice-bar :text="noticeListText" :direction="column" mode="closable" @click="gotoNotice"
					@close="closeNoticeBar"></u-notice-bar>
			</view>
			<view class="product-content">
				<uni-section class="section-Title" :style="{'border-left-color': baseColor}" title="产品推荐" titleFontSize="36" titleColor="#000000"
					@click="moreproduct">
					<template v-slot:right>
						<text class="section-subTitle">查看更多</text>
					</template>
				</uni-section>
				<scroll-view :scrollX="true" class="product-block">
					<view class="product-block-items">
						<view @tap="gotoProductDetail(product._id)" class="product-block-item" v-for="(product,index) in productList"
							:key="index">
							<view class="product-item-label">
								<view class="product-item-label-title">推荐</view>
							</view>
							<image class="product-item-photo" mode="aspectFill" :src="product.tPhoto"></image>
							<view class="product-item-info">
								<view class="product-item-title">{{product.tName}}</view>
								<view class="product-item-info-bottom">
									<view class="product-item-info-time">
										<uni-dateformat :date="product.wUpdateTime * 1000" format="yyyy-MM-dd hh:mm">
										</uni-dateformat>
									</view>
									<view class="product-item-info-view" :style="{'background-color': baseColor}">
										<view>查看</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="newsList">
			<uni-section class="section-Title" :style="{'border-left-color': baseColor}" title="最新动态" titleFontSize="36" titleColor="#000000" @click="morenews">
				<template v-slot:right>
					<text class="section-subTitle">查看更多</text>
				</template>
			</uni-section>

			<view class="news-content" :style="'min-height:'+(systemHeight-80)+'px'">
				<yn-list :lists="newsList" type="news"></yn-list>
				<u-loadmore :status="status" />
			</view>

		</view>

		<u-sticky @fixed="showNav" @unfixed="hiddenNav" :offset-top="offset"></u-sticky>
		<yn-tabbar currentTab='home'></yn-tabbar>

	</view>
</template>

<script>
	import API from '@/common/api.js';
	var app = getApp();
	export default {
		data() {
			return {
				baseinfo: [],
				minappinfo: [],
				title: '',
				swiperColor: 'rgba(0,0,0,0)',
				swiperList: [],
				productList: [],
				noticeList: [],
				noticeListText: [],
				showNotice: true,
				newsList: [],
				isLastPage: false,
				status: "loading",
				page: 1,
				iconList: [
					{
						name: 'home',
                        title: '企业介绍'
					},
					{
						name: 'calendar',
					    title: '发展历程'
					},
                    {
                        name: 'bookmark',
                        title: '关于我们'
                    },
                    {
                        name: 'email',
                        title: '联系我们'
                    },
                    {
                        name: 'order',
                        title: '招聘信息'
                    },
                ],
				offset: 44,
				systemHeight: 400,
				showNavs: false,
				showNavbar: false,
				keyword: '',
				placeholderKeyword: '搜索您需要的产品',
				titleStyle:{
					Color: '#ffffff',
				},
				leftIconColor: '#ffffff',
				baseColor : '#2d96ff',
				topBg:'/static/images/top-bg.png'
			}
		},
		onLoad() {
			this.baseinfo = uni.getStorageSync('baseinfo');
			this.minappinfo = uni.getStorageSync('minappinfo');
			
			this.getSwiper({
				position: 'home_top_swiper',
				type: 'wxlink'
			});
			this.getNotice();
			this.getProducts();
			this.getNews();

			this.offset = (uni.getSystemInfoSync().statusBarHeight + 44) * (750 / uni.getSystemInfoSync().windowWidth);
			this.systemHeight = uni.getSystemInfoSync().windowHeight;
		},
		onReady() {
			if(this.minappinfo.bgColor){
				this.baseColor = this.minappinfo.bgColor;
			}
			if(this.minappinfo.textColor){
				this.leftIconColor = this.minappinfo.textColor;
				this.titleStyle.Color = this.minappinfo.textColor;
			}
			if(this.minappinfo.tTopBg){
				this.topBg = this.minappinfo.tTopBg;
			}
		},
		onPageScroll(res) {
			if (res.scrollTop > 80) {
				this.title = this.minappinfo.tName ? this.minappinfo.tName : "云诺服务";
				this.showNavbar = true
			} else {
				this.title = " ";
				this.showNavbar = false
			}

		},
		onShareAppMessage: function() {
			let title = this.minappinfo.tShareName ? this.minappinfo.tShareName : '云诺服务';
			let img = this.minappinfo.tLogo ? this.minappinfo.tLogo : '../../images/default.png'
			
			return {
				title: title,
				imageUrl: img,
				path: '/pages/index/index'
			}
		},
		onShareTimeline: function(res) {
			let title = this.minappinfo.tShareName ? this.minappinfo.tShareName : '云诺服务';
			let img = this.minappinfo.tLogo ? this.minappinfo.tLogo : '../../images/default.png'
			if (this.minappinfo.tShareDesc) {
				title = this.minappinfo.tShareName + " - " + this.minappinfo.tShareDesc
			}
			return {
				title: title,
				imageUrl: img,
				path: '/pages/index/index'
			}
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.getNews({
					page: this.page
				})

			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.isLastPage = true;
			this.status = "loading";
			this.noticeList = [];
			this.noticeListText = [];
			this.productList = [];
			this.newsList = [];
			this.getNotice();
			this.getNews();
			this.getProducts();
			uni.stopPullDownRefresh(); //停止刷新
		},
		methods: {
			getSwiper: function(args) {
				API.getSwiper(args).then(res => {
						//console.log(res)
						let swiper = [];
						let arr = res.data.data;
						arr.forEach(function(i, index) {
							swiper[index] = i;
							swiper[index]['tPhoto'] = API.getApiUrl() + '/cos/img?key=' + i['tPhoto'];
						})

						this.swiperList = swiper;
					})
					.catch(err => {
						console.log(err)
					})
			},
			clickTopSwiper: function(i) {
				let urlpath = this.swiperList[i]['tLink'];
				if (this.swiperList[i]['tType'] == 'wxlink') {
					uni.navigateTo({
						url: urlpath,
					})
				}else if (this.swiperList[i]['tType'] == 'wxappid') {
					let appid = this.swiperList[i]['tAppid'];
					uni.navigateToMiniProgram({
						appId: appid,
						path: urlpath,
					})
				}  
			},
			getNotice: function(args) {
				API.getNotice(args).then(res => {
						let notice = [];
						let arr = res.data.data;
						arr.forEach(function(i, index) {
							notice[index] = i['tName'];
						})
						if (res.data.count > 0) {
							this.showNotice = true;
						} else {
							this.showNotice = false;
						}
						this.noticeListText = notice;
						this.noticeList = res.data.data;
					})
					.catch(err => {
						console.log(err)
					})
			},
			gotoNotice: function() {
				uni.navigateTo({
					url: "/pages/notice/notice"
				})
			},
			closeNoticeBar: function() {
				this.showNotice = !this.showNotice;
			},
			getProducts: function(args) {
				API.getProducts(args).then(res => {
						let product = [];
						let arr = res.data.data;
						arr.forEach(function(i, index) {
							product[index] = i;
							if (i['tPhoto']) {
								product[index]['tPhoto'] = API.getApiUrl() + '/cos/img?key=' + i['tPhoto'];
							} else {
								product[index]['tPhoto'] = '/static/images/default.png';
							}
						})

						this.productList = product;
					})
					.catch(err => {
						console.log(err)
					})
			},
			getNews: function(args) {
				API.getNews(args).then(res => {
						if (res.data.data.length < 10 || res.data.data == [] || res.data.data == null) {
							this.isLastPage = true;
							this.status = "nomore";
						}

						let news = [];
						let arr = res.data.data;
						arr.forEach(function(i, index) {
							news[index] = i;
							if (i['tPhoto']) {
								news[index]['tPhoto'] = API.getApiUrl() + '/cos/img?key=' + i['tPhoto'];
							} else {
								news[index]['tPhoto'] = '/static/images/default.png';
							}
						})

						this.newsList = this.newsList.concat(news);

						this.page = this.page + 1;
						console.log(this.page);
						this.isLoading = false;
					})
					.catch(err => {
						console.log(err);
					})
			},
			moreproduct: function() {
				uni.switchTab({
					url: '/pages/product/product'
				})
			},
			morenews: function() {
				uni.switchTab({
					url: '/pages/news/news'
				})
			},
			clickTopBtn: function(i){
				
				let urlpath = '/pages/introduce/introduce';
				switch(i){
					case 0: urlpath = '/pages/introduce/introduce';break;
					case 1: urlpath = '/pages/course/course';break;
					case 2: urlpath = '/pages/about/about';break;
					case 3: urlpath = '/pages/contact/contact';break;
					case 4: urlpath = '/pages/job/job';break;
					default: urlpath = '/pages/introduce/introduce';break;
				}
				
				uni.navigateTo({
					url: urlpath
				})
			},
			gotoProductDetail: function(id) {
				uni.navigateTo({
					url: '/pages/product/detail?id=' + id
				})
			},
			showNav: function() {
				let _this = this;
				setTimeout(function() {
					_this.showNavs = true;
				}, 1000);


			},
			hiddenNav: function() {
				let _this = this;
				setTimeout(function() {
					_this.showNavs = false;
				}, 1000);
			},
			searchBtnClick: function() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			clickSearch: function(e) {
				this.keyword = e;
				uni.navigateTo({
					url: '/pages/search/search?keyword=' + this.keyword
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.top {
		position: relative;
		color: #ffffff;
		font-family:"Arial","Microsoft YaHei","黑体","宋体",SimSun,FangSong,SimHei,KaiTi,sans-serif;

		@media screen and (max-width: 320px) {
			padding-top: 80rpx;
		}

		@media screen and (min-width: 320px) and (max-width: 375px) {
			padding-top: 90rpx;
		}

		@media screen and (min-width: 375px) and (max-width: 414px) {
			padding-top: 95rpx;
		}

		@media screen and (min-width: 414px) and (max-width: 428px) {
			padding-top: 100rpx;
		}

		@media screen and (min-width: 428px) {
			padding-top: 100rpx;
		}

		.top-title {
			position: relative;
			width: 350rpx;
			min-height: 50rpx;
			margin-left: 40rpx;
			color: #ffffff;

			@media screen and (max-width: 320px) {
				font-size: 32rpx;
			}

			@media screen and (min-width: 320px) and (max-width: 375px) {
				font-size: 32rpx;
			}

			@media screen and (min-width: 375px) and (max-width: 414px) {
				font-size: 35rpx;
			}

			@media screen and (min-width: 414px) and (max-width: 428px) {
				font-size: 38rpx;
			}

			@media screen and (min-width: 428px) {
				font-size: 40rpx;
			}
		}





		.swiper-content {

			@media screen and (max-width: 320px) {
				padding: 30rpx 0rpx;
			}

			@media screen and (min-width: 320px) and (max-width: 375px) {
				padding: 35rpx 0rpx;
			}

			@media screen and (min-width: 375px) and (max-width: 414px) {
				padding: 40rpx 0rpx;
			}

			@media screen and (min-width: 414px) and (max-width: 428px) {
				padding: 45rpx 0rpx;
			}

			@media screen and (min-width: 428px) {
				padding: 50rpx 0rpx;
			}
		}



		.top-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
		}

		.search{
			position: relative;
			z-index: 999;
		}


		.notice-content {
			padding: 10rpx;
			height: 50rpx;
		}


		.product-content {
			padding: 30rpx;

			.section-Title {
				font-size: 36rpx;
				color: #000000;
				text-indent: 5rpx;
				line-height: 20rpx;
				border-left: 8rpx solid #2d96ff;
				display: block;
			}

			.section-subTitle {
				font-size: 22rpx;
				color: #7d7d7d;
			}

			.product-block {
				height: 425rpx;

				.product-block-items {
					white-space: nowrap;
					overflow-x: scroll;
					margin: 26rpx 0rpx;

					.product-block-item {
						position: relative;
						overflow: hidden;
						display: inline-block;
						margin-right: 20rpx;
						width: 300rpx;
						border-radius: 18rpx;
						box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.04);
						border: 1rpx solid rgba(236, 236, 236, 1);
						vertical-align: bottom;

						.product-item-label {
							position: absolute;
							left: 10rpx;
							top: 10rpx;
							padding: 12rpx;
							padding-bottom: 8rpx;
							border-radius: 10rpx;
							background: rgba(255, 73, 73, 0.6);
							z-index: 1;

							.product-item-label-title {
								font-size: 18rpx;
								color: rgba(255, 255, 255, 1);
							}

							.date-label-date {
								margin: 0 4rpx;
								font-size: 24rpx;
								font-weight: 300;
								color: #ffffff;
							}
						}

						.product-item-photo {
							display: block;
							width: 100%;
							height: 240rpx;
						}

						.product-item-info {
							position: relative;
							padding: 20rpx;
							background: #ffffff;
							line-height: 1;

							.product-item-title {
								font-size: 28rpx;
								color: #121212;
								font-weight: bold;
								line-height: 36rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.product-item-info-bottom {
								display: flex;
								justify-content: space-between;
								align-items: center;
								flex-flow: row nowrap;
								margin-top: 18rpx;
								font-size: 22rpx;
								color: #7d7d7d;

								.product-item-info-view {
									padding: 8rpx 15rpx;
									border-radius: 24rpx;
									background-color: #2d96ff;
									color: #ffffff;
								}
							}
						}

					}
				}
			}
		}
	}

	.newsList {
		padding: 0rpx 30rpx 30rpx 30rpx;

		.section-Title {
			font-size: 36rpx;
			color: #000000;
			text-indent: 5rpx;
			line-height: 20rpx;
			border-left: 8rpx solid #2d96ff;
			display: block;
		}

		.section-subTitle {
			font-size: 22rpx;
			color: #7d7d7d;
		}
	}
	
	.grid-text {
		        font-size: 14px;
		        color: #909399;
		        padding: 10rpx 0 20rpx 0rpx;
		    }
</style>
